import React,{ Component } from 'react'
import { Form, Icon, Input, Button } from 'antd'
import { Login } from '../../actions/home'

const FormItem = Form.Item;

class LoginForm extends Component {
  dispatch = null
  constructor(props){
    super(props)
    this.dispatch = this.props.dispatch
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.dispatch(Login(values.userName,values.password))
      }
    })
  }

  render(){
    const { getFieldDecorator } = this.props.form;
    return(
      <Form onSubmit={this.handleSubmit} className="login-form">
       <FormItem>
         {getFieldDecorator('userName', {
           rules: [{ required: true, message: '请输入您的用户名！' }],
           initialValue: 'demo',
         })(
           <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
         )}
       </FormItem>
       <FormItem>
         {getFieldDecorator('password', {
           rules: [{ required: true, message: '请输入您的密码！' }],
           initialValue: 'demo',
         })(
           <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
         )}
       </FormItem>
         <Button type="primary" htmlType="submit" className="login-form-button">
           上车
         </Button>
     </Form>
    )
  }
}

export default Form.create()(LoginForm)
